<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>HOME</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/qpad.css"/>

	</head>

	<body>
		<div class="swiper-container">
			<div class="swiper-wrapper" id="content"></div>
		</div>

	</body>
	<script type="text/html" id="qitem">
		<ul class="mui-table-view">
			<input type="hidden" class="qid" value="{{id}}" />
			<li class="mui-table-view-cell" style="background-color: #f8f8fa;">
				<span class="mui-pull-left">
					<button class="mui-btn mui-btn-primary">
						{{if type=="single_choice"}}单选{{/if}}
						{{if type=="uncertain_choice"}}多选{{/if}}
						{{if type=="determine"}}判断{{/if}}
						{{if type=="material"}}材料题{{/if}}
					</button>
				</span>
				<span class="mui-pull-left  mui-ellipsis" style="margin-left: 20px;line-height: 33px;width: 50%;font-size: 15px;">
					
				</span>
				<span class="mui-pull-right" style="margin-right: 10px;line-height: 33px;font-size: 15px;"><span style="color: #2fa4ea;">1</span>/1</span>
			</li>
			<li class="mui-table-view-cell selectitems" id="{{id}}" data-type="{{type}}">
				<h5 style="font-size: 18px;line-height: 24px;">{{#loadImage(stem)}}</h5> {{if type == "determine"}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(1,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 1}} onrightitem selected{{else}} rightitem{{/if}}{{/each}}{{else}} rightitem{{/if}}">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer(0,{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == 0}} onwrongitem selected{{else}} wrongitem{{/if}}{{/each}}{{else}} wrongitem{{/if}}">	
								</span>
								<span class="answeritem">
									错误
								</span>						
				</h4> {{else if type == "material"}}
				<!--材料题占位区间-->
				{{else}} {{each $parse(metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{type}}" onclick="selectAnswer({{i}},{{id}},{{answer}},this)">
								<span class="selectitem{{if myans}}{{each $toArray(myans)}}{{if $value == i}} selected{{/if}}{{/each}}{{/if}}">
									{{if i==0}}A{{/if}}
									{{if i==1}}B{{/if}}
									{{if i==2}}C{{/if}}
									{{if i==3}}D{{/if}}
									{{if i==4}}E{{/if}}
									{{if i==5}}F{{/if}}
								</span>
								<span class="answeritem">
									{{#value}}
								</span>						
					</h4> {{/each}} {{/if}}
			</li>

			{{if sub}} {{each sub as vv}}
			<li class="mui-table-view-cell selectitems" id="{{vv.id}}" data-type="{{vv.type}}">
				<h5 style="font-size: 18px;line-height: 24px;">({{if vv.type=="single_choice"}}单选{{/if}}{{if vv.type=="uncertain_choice"}}多选{{/if}}{{if vv.type=="determine"}}判断{{/if}})&nbsp;{{#vv.stem}}</h5> {{if vv.type == "determine"}}
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer(1,{{vv.id}},{{answer}},this)">
								<span class="selectitem{{if vv.myans}}{{each $toArray(myans)}}{{if $value == 1}} onrightitem selected{{else}} rightitem{{/if}}{{/each}}{{else}} rightitem{{/if}}">	
								</span>
								<span class="answeritem">
									正确
								</span>						
				</h4>
				<div class="clearfix">

				</div>
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer(0,{{vv.id}},{{answer}},this)">
								<span class="selectitem wrongitem">	
								</span>
								<span class="answeritem{{if vv.myans}}{{each $toArray(myans)}}{{if $value == 0}} onwrongitem selected{{else}} wrongitem{{/if}}{{/each}}{{else}} wrongitem{{/if}}}">
									错误
								</span>						
				</h4> {{else}} {{each $parse(vv.metas).choices as value i}}
				<h4 class="choiceitem" data-type="{{vv.type}}" onclick="selectAnswer({{i}},{{vv.id}},{{answer}},this)">
									<span class="selectitem{{if vv.myans}}{{each $toArray(vv.myans)}}{{if $value == index}} selected{{/if}}{{/each}}{{/if}}">
										{{if i==0}}A{{/if}}
										{{if i==1}}B{{/if}}
										{{if i==2}}C{{/if}}
										{{if i==3}}D{{/if}}
										{{if i==4}}E{{/if}}
										{{if i==5}}F{{/if}}
									</span>
									<span class="answeritem">
										{{#value}}
									</span>						
						</h4> {{/each}} {{/if}}
			</li>
			{{/each}} {{/if}}
			<li class="mui-table-view-cell" style="padding: 15px 15px;">
				<div style="background-color: #f8f8fa;padding: 10px 10px;">
					<h4 class="jiexi-title"><img src="../image/xiangjie.png" style="height: 25px;"/></h4>
					<div class="jiexi">
						{{if type != "material"}}
						<p>
							答案:
							{{each $toArray(answer)}} 
							{{if type=="determine"}}
								{{if $value==0}}错误{{/if}} {{if $value==1}}正确{{/if}} 
							{{else}}
								{{if $value==0}}A{{/if}} {{if $value==1}}B{{/if}} {{if $value==2}}C{{/if}} {{if $value==3}}D{{/if}} {{if $value==4}}E{{/if}} {{if $value==5}}F{{/if}} &nbsp; 
							{{/if}}
							{{/each}}
						
						</p>
						{{/if}}

						<p>
							{{if analysis}}
							{{#loadImage(analysis)}}
							{{/if}}
						</p>

					</div>

				</div>

			</li>
		</ul>
	</script>
	<script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/template/helper.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/lokijs.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/db.js" type="text/javascript" charset="utf-8"></script>
	<script src="../script/app.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		MYPAGE = {};
		MYPAGE.pageno = 0;

		function checkAnswer(myAns, answer, j) {
			var myAns = JSON.stringify(myAns);
			myAns = myAns.replace(/\[/, "");
			myAns = myAns.replace(/\]/, "");
			if (myAns == answer) {
				var result = 1;
			} else {
				var result = 0;
			}
			var myAnsStr = "[\"" + myAns + "\"]";
//			var func = function(db) {
//				var sql = 'UPDATE `question` SET `myans` = \'' + myAnsStr + '\',`result` = ' + result + ' WHERE `question`.`id` = ' + j;
//				db.executeSql({
//					name: 'data',
//					sql: sql
//				}, function(ret, err) {
//					if (ret.status) {
//						//												api.toast({
//						//													msg:"更新成功！"
//						//												});
//					} else {
//						api.toast({
//							msg: err.msg
//						});
//					}
//				});
//			}
//			APP.openDb(func);
		}

		function selectAnswer(k, j, answer, obj) {
			var ans = Array();
			var type = obj.getAttribute('data-type');
			var items = obj.parentNode.getElementsByClassName('selectitem');
			var citem = obj.getElementsByClassName("selectitem")[0];
			if (type == "uncertain_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						citem.className = "selectitem selected";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
					default:
						citem.className = "selectitem";
						for (var i = 0; i < items.length; i++) {
							if (items[i].className == "selectitem selected") {
								var index = ans.length;
								ans[index] = i;
							}
						}
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "single_choice") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem":
						for (var i = 0; i < items.length; i++) {
							items[i].className = "selectitem";
						}
						citem.className = "selectitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem selected":
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
					default:
						citem.className = "selectitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			} else if (type == "determine") {
				var cClassName = citem.className;
				switch (cClassName) {
					case "selectitem rightitem":
						items[1].className = "selectitem wrongitem";
						citem.className = "selectitem onrightitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem wrongitem":
						items[0].className = "selectitem rightitem";
						citem.className = "selectitem onwrongitem selected";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onrightitem selected":
						citem.className = "selectitem rightitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
					case "selectitem onwrongitem selected":
						citem.className = "selectitem wrongitem";
						ans[0] = k;
						checkAnswer(ans, answer, j);
						break;
				}
			}
			//		.className="selectitem selected";
		};

		function swiperNextIndex() {
			//自定义获取下一个slide函数 勿与原api搞混
			var nextindexEle = document.getElementsByClassName('swiper-slide-next')[0];
			if (typeof(nextindexEle) == "undefined") {
				nextindex = 2;
			} else {
				nextindex = parseInt(nextindexEle.getAttribute('data-swiper-slide-index')) + 1;
			}
			if (nextindex == 1) {
				nextindex = 11;
			}
			return nextindex;
			//使用时碰到11与10  应同时更新索引为1与0的slide的内容 处理倒回错误问题
//			if (nextindex == 11) {
//				swiper.slides[1].innerHTML = html;
//			}
//			if (nextindex == 10) {
//				swiper.slides[0].innerHTML = html;
//			}
		}

		apiready = function() {
			MYPAGE.id = api.pageParam.id;
			var func = function(db) {
//				var cid = localStorage.getItem('cid');
//				if(cid){
//					var target = "course-"+cid;
//				}else{
//					var target = "course-1";
				var sql = 'SELECT * FROM question where `id` = \'' + MYPAGE.id + '\'';
				
				db.selectSql({
					name: 'data',
					sql: sql
				}, function(ret, err) {
					if (ret.status) {
//						alert(JSON.stringify(ret.data));
						var html = template('qitem',ret.data[0]);
						document.getElementById("content").innerHTML=html;
					} else {
						api.toast({
							msg: err.msg
						});
					}
				});
			}
			APP.openQDb(func);
		}
	</script>

</html>